<script lang="ts" setup>
import VueFlowChart from './NewStudyTree.vue';
</script>

<template>
  <div class="tab-switcher">
    <a-tabs default-active-key="1" class="responsive-tabs">
      <a-tab-pane key="1">
        <template #tab>
          <span class="tab-title">技能路线</span>
        </template>
        <VueFlowChart />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<style scoped>
.tab-switcher {
  padding: 1.25rem; /* 20px to 1.25rem */
  background-color: #ffffff;
  margin-top: 1.25rem; /* 20px to 1.25rem */
  border-radius: 0.5rem; /* 8px to 0.5rem */
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); /* 2px to 0.125rem, 8px to 0.5rem */

  @media (max-width: 768px) {
    padding: 0.75rem; /* 12px to 0.75rem */
    margin-top: 0.75rem; /* 12px to 0.75rem */
  }
}

.responsive-tabs {
  .ant-tabs-nav {
    margin-bottom: 1.25rem; /* 20px to 1.25rem */
    margin-left: 1.25rem; /* 20px to 1.25rem */

    @media (max-width: 768px) {
      margin-bottom: 0.75rem; /* 12px to 0.75rem */
      margin-left: 0.75rem; /* 12px to 0.75rem */
    }
  }

  .ant-tabs-tab {
    .tab-title {
      font-size: 1.125rem; /* 18px to 1.125rem */
      font-weight: bold;

      @media (max-width: 768px) {
        font-size: 1rem; /* 16px to 1rem */
      }
    }
  }

  .ant-tabs-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .tab-switcher {
    padding: 0.75rem;
    margin-top: 0.75rem;
  }

  .responsive-tabs .ant-tabs-nav {
    margin-bottom: 0.75rem;
    margin-left: 0.75rem;
  }

  .responsive-tabs .ant-tabs-tab .tab-title {
    font-size: 1rem;
  }
}
</style>
